<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="../css/home.css">
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://www.jq22.com/demo/number202111050044/js/number.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>

<style>
  #slide {
    width: 100%;
    height: 400px;
    position: relative;
  }

  #slide li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
  }

  #slide li.active {
    opacity: 1;
  }

  .item {
    display: block;
  }

  #collapse div {
    display: none;
    padding: 4px;
  }
</style>

<body>
  <div id="keep">
    <!-- 页面头部 -->
    <header>
      <div style="display: flex;">
        <div class="container">
          <div class="row">
            <div class="col-lg-1" style="text-align: right;">
              <img src="../img/cat-foot.svg" height="40px" width="40px" />
            </div>
            <div class="col-lg-2" style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
              <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
            </div>
            <div class="col-lg-7">
              <ul style="font-family: 得意黑;">
                <li class="li_header"><a class="a_header" href="./home.html">首页</a></li>
                <li class="li_header"><a class="a_header" href="./about.html">关于仁爱</a></li>
                <li class="li_header"><a class="a_header" href="./service.html">服务项目</a></li>
                <li class="li_header"><a class="a_header" href="./keep_a_pet.html">养宠小百科</a></li>
                <li class="li_header"><a class="a_header" href="./join_us.html">加入我们</a></li>
                <li class="li_header"><a class="a_header" href="./shop.html">线上商店</a></li>
                <li class="li_header"><a class="a_header" href="./message.html">在线留言</a></li>
                <li id="li_1" class="li_header"><a class="a_header" href="./login.html">登录/注册</a></li>
                <li id="li_2" class="li_header"><a class="a_header" href="./userinfo.html">个人中心</a></li>
              </ul>
            </div>
            <div class="col-lg-2" style="text-align: left;overflow: hidden; position: relative;">
              <input type="text" style="margin-top: 8px;" id="name">
              <img onclick="search()" src="../img/search.png" alt="" width="23px" height="23px"
                style="position: absolute; top: 11px; left: 135px; cursor: pointer;">
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 一 -->
    <section style="position: relative;">
      <div>
        <ul id="slide">
          <li class="active"><img src="../img/keep_banner1.png" width="100%" height="100%" alt=""></li>
        </ul>
      </div>
    </section>
    <!-- 二 -->
    <section style="position: relative; padding-top: 3%;padding-bottom: 2%;">
      <div class="container keep_two_div_class" style="overflow: hidden;">
        <h4 style="color: #ff5b2e;padding-left: 15px;">宠物咨询</h4>
        <div style="height: 2px; background-color: #eee; width: 90%;">
          <div style="height: 2px; background-color: #ff5b2e; width: 12%;"></div>
        </div>
        <div style="display: flex; margin-top: 3%;">
          <div class="keep_two_div1_class" style="width: 31%;margin: auto;">
            <img src="../img/AD0I4-btBhACGAAg1-7aywUo0fvE5gUwrAI4qgE.jpg.webp" width="100%" alt="">
            <span style="display: block; margin-top: 1%; text-align: center;">举行户外狗狗派对</span>
          </div>
          <div class="keep_two_div2_class" style="width: 31%;margin: auto;">
            <img src="../img/AD0I4-btBhACGAAg1f7aywUoptrr_gUwrAI4qgE.jpg.webp" width="100%" alt="">
            <span style="display: block; margin-top: 1%; text-align: center;">柴犬评分区分的规定</span>
          </div>
          <div class="keep_two_div3_class" style="width: 31%;margin: auto;">
            <img src="../img/AD0I4-btBhACGAAg1P7aywUomryb2QEwrAI4qgE.jpg.webp" width="100%" alt="">
            <span style="display: block; margin-top: 1%; text-align: center;">网购哈士奇技巧多</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 三 -->
    <section style="position: relative; padding-top: 3%;padding-bottom: 5%;">
      <div class="container" id="collapse">
        <h3 style="font-size: 18px; border-bottom: 1px solid #eee;cursor: pointer;"> 狗狗抑郁症的原因及解决办法<span
            style="display: block; text-align: right;">2024/6/18</span></h3>
        <div>
          <p>环境改善：确保狗狗的生活环境舒适、安全且有足够的私人空间。

            增加运动：定期带狗狗散步和玩耍，帮助消耗多余的能量，促进健康。

            增进社交：让狗狗与其他狗狗或动物互动，以减少孤独感。

            训练和激励：通过正面强化的训练方法鼓励狗狗的好行为，并给予适当的奖励。

            保持日常规律：为狗狗建立稳定的日常生活规律，包括饮食、散步和休息时间。

            专业帮助：如果情况严重或持续不见好转，建议咨询兽医或动物行为专家。</p>
        </div>

        <h3 style="font-size: 18px; border-bottom: 1px solid #eee;cursor: pointer;">挑选纯种泰迪犬的一些使用技巧<span
            style="display: block; text-align: right;">2024/6/17</span></h3>
        <div>
          <p>
            挑选纯种泰迪犬时，关注其外观特征如杏仁形眼睛、柔软且卷曲的毛发、以及良好的身材比例是关键。
            检查其四肢是否结实、牙齿是否健康，并通过观察幼犬父母的外形来评估纯种特性。了解泰迪的标准体型和毛色，
            选择深色且色彩均匀的毛发为佳。同时，确保从可靠的家养犬舍购买，避免狗市中的不明来源幼犬，以保障泰迪的健康和纯正血统。
          </p>
        </div>

        <h3 style="font-size: 18px; border-bottom: 1px solid #eee;cursor: pointer;"> 齐齐哈尔宠物经济好红火，消费潜力无穷<span
            style="display: block; text-align: right;">2024/6/16</span></h3>
        <div>
          <p>
            齐齐哈尔的宠物经济呈现出蓬勃的发展势头，消费潜力巨大。随着居民生活水平的提升及对精神生活需求的增加，
            宠物逐渐成为家庭的重要成员，带动了宠物食品、用品、医疗等相关产品与服务的繁荣。商家通过创新服务和产品来满足宠物主人的多样化需求，
            进一步激发了市场的活力和消费潜力，展现出齐齐哈尔宠物经济持续增长的良好前景。
          </p>
        </div>

        <h3 style="font-size: 18px; border-bottom: 1px solid #eee;cursor: pointer;">宠物切莫 "所托非人"<span
            style="display: block; text-align: right;">2024/6/15</span></h3>
        <div>
          <p>宠物切莫 "所托非人" 这句话强调的是宠物主人在选择宠物托管服务时，必须慎重考虑，确保所选的服务提供者是可靠和负责任的。
            这包括对托管环境的清洁与安全、服务人员的专业性和经验、以及整体的宠物护理标准进行仔细评估。
            正确的托管不仅能保证宠物的安全和健康，也能让宠物主人放心，从而避免可能的不良后果和遗憾。</p>
        </div>

        <h3 style="font-size: 18px; border-bottom: 1px solid #eee;cursor: pointer;">宠物食品价格或降温<span
            style="display: block; text-align: right;">2024/6/14</span></h3>
        <div>
          <p>
            宠物食品价格可能会经历一段降温期，这意味着价格将出现一定程度的回落。这种变化可能由多方面因素驱动，
            如原材料成本的下降、市场竞争加剧导致的价格调整、或是消费者需求的变化。对于宠物主人来说，这无疑是一个减轻经济负担、
            更易获取高质量宠物食品的好消息。商家在此期间可能需要通过优化供应链、推出新产品或增加促销活动来吸引顾客，保持市场竞争力。
          </p>
        </div>
        </li>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #2f2d53;height: 350px; overflow: hidden; padding-top: 5%;">
      <div class="container">
        <div style="display: flex; padding-left: 20%;">
          <div style="width: 35%;">
            <div style="display: flex;">
              <div style="text-align: right;">
                <img src="../img/cat-foot.svg" height="40px" width="40px" />
              </div>
              <div style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
                <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
              </div>
            </div>
            <div style="color: #fff; margin-top: 5%;">
              <span>
                宠物护理和兽医服务对于维持<br>我们心爱的动物伴侣的健康和福祉至关重要
              </span>
            </div>
          </div>
          <div style="display: flex; width: 65%;">
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">快速链接</h4><br>
              <h6><a style="color: #fff !important;" href="./about.html">关于我们</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">服务项目</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">线上商店</a></h6>
            </div>
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">法律</h4><br>
              <h6 style="color: #fff;">常见问题</h6><br>
              <h6 style="color: #fff;">条款及细则</h6><br>
              <h6 style="color: #fff;">隐私与政策</h6>
            </div>
          </div>
        </div>
        <span style="color: #fff; display: block; text-align: center; font-size: 14px; margin-top: 2%;">©2024年
          版权所有仁爱宠物医院</span>
      </div>
    </footer>
  </div>
</body>
<script>
  // 折叠
  // 获取元素
  const collapse = document.querySelector('#collapse');
  let h3s = document.querySelectorAll('h3');
  let divs = collapse.querySelectorAll('div');
  // 遍历 获取到的h3
  for (let i = 0; i < h3s.length; i++) {
    // 查看是哪个h3点击了
    h3s[i].addEventListener('click', function () {
      // 获取下一个兄弟元素
      let contDiv = this.nextElementSibling;
      // 判断是block还是none 是显示就隐藏  是隐藏就显示
      if (contDiv.style.display == 'block') {
        contDiv.style.display = 'none';
      } else {
        // 遍历
        divs.forEach(function (cont) {
          // 先把所有的都隐藏
          cont.style.display = 'none';
        })
        // 把当前的div改为block
        contDiv.style.display = 'block';
      }
    })
  }

  // 轮播图
  let slide = document.getElementById('slide');
  let slideList = slide.querySelectorAll('li');
  let node = null;
  let index = 0;
  let timer = setInterval(function () {
    if (node != null) node.className = "";
    index = index >= slideList.length - 1 ? 0 : index + 1;
    slideList[index].className = "active";
    node = slideList[index];
  }, 5000)


  const inter1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.5 } })
    t1.from('.keep_two_div1_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.keep_two_div2_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.keep_two_div3_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter1.observe(document.querySelector('.keep_two_div_class'))
</script>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  function search() {
    const name = document.getElementById("name").value;
    localStorage.setItem("name",name);
    window.location.href = './shop.html'
  }
</script>
</html>